<template>
  <div>
    讲解生命周期
    <p ref="pp"></p>
    <button @click="changMsg">点我改</button>
  </div>
</template>

<script>
export default {
 

  data() {
    return {
      msg:'你好全世界'
    };
  },
  methods:{
  changMsg(){
    this.msg='hellow world'
  }
  },
  beforeCreate(){
    console.log('beforeCreate',this.msg,this.$refs.pp);
  },
  created(){
    console.log('created',this.msg,this.$refs.pp);
  },
  beforeMount(){
      console.log('beforeMount',this.$refs.pp);
  },
  mounted(){
    console.log('mounted',this.$refs.pp);
  },
  beforeUpdate() {
    console.log('beforeUpdate', this.msg, this.$refs.pp.innerHTML)
  },
  updated() {
    console.log('updated', this.msg, this.$refs.pp.innerHTML)
  },
  

 
};
</script>

<style lang="scss" scoped>

</style>